<template>
  <div class="container">
    <div class="explain back-fff">
      <div class="h4">Welcome to UWC China</div>
      <p class="text">Register your profile below in order to submit applications, schedule tours and sign up events</p>
    </div>
    <div class="forms back-fff">
      <el-form ref="form" :model="form" label-width="250px" class="form">
        <el-form-item label="Student's First Name" prop="F_FirstName" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_FirstName" placeholder="Please input Student's First Name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="Student's Last Name" prop="F_LastName" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_LastName" placeholder="Please input Student's Last Name" maxlength="20"></el-input>
        </el-form-item>

        <el-form-item label="Student's Full Name" prop="F_RealName" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_RealName" placeholder="Please input Student's Full Name" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="Student's Gender" prop="F_Gender" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-select v-model="form.F_Gender" placeholder="Please input Student's Gender">
            <el-option label="Male" value="1"></el-option>
            <el-option label="Female" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ID Type" prop="F_IDType" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-select v-model="form.F_IDType" placeholder="Please select Type">
            <el-option v-for="(item, index) in DocTypes" :key="index" :label="item.F_ItemName" :value="item.F_ItemValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ID No." prop="F_IdentityNo" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_IdentityNo" placeholder="Please input ID No." maxlength="18"></el-input>
          <div style="line-height: 20px;margin-top: 10px;color: rgb(15, 132, 228);">*Please noted that the ID No. you put here will be your account number. Use this number to login next time.</div>
        </el-form-item>

        <el-form-item label="Password" prop="F_Password" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input type="password" v-model="form.F_Password" placeholder="Please input Password" minlength="8" maxlength="16"></el-input>
               <div style="line-height: 20px;margin-top: 10px;color: rgb(15, 132, 228);">* Use 8 or more characters with a mix of letters, numbers & symbols.</div>
     </el-form-item>
        <el-form-item label="Confirm your Password" prop="F_AgainPassword" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input type="password" v-model="form.F_AgainPassword" placeholder="Please input Confirm your Password" minlength="8" maxlength="16"></el-input>
        </el-form-item>

        <el-form-item label="Student's Current School" prop="F_CurrentSchool" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_CurrentSchool" placeholder="Please input Student's Current School" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="Student's Current Grade Level" prop="F_CurrentGradeLevel" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-select v-model="form.F_CurrentGradeLevel" placeholder="Please select Student's Current Grade Level">
            <el-option v-for="(item, index) in ENRGrades" :key="index" :label="item.F_ItemName" :value="item.F_ItemValue"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="Email Address" prop="F_Email" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_Email" placeholder="Please input Email Address" maxlength="50"></el-input>
          <div style="line-height: 20px;margin-top: 10px;color: rgb(15, 132, 228);">*All email addresses must be unique. Please do not enter the same email address for multiple users.</div>
        </el-form-item>
        <!-- <el-form-item label="Mobile Phone" prop="F_Telephone" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <el-input v-model="form.F_Telephone" placeholder="Please input Mobile Phone" maxlength="11"></el-input>
        </el-form-item> -->
         <el-form-item label="Mobile Phone" prop="F_Telephone" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
          <vue-phone-number-input v-model="form.F_Telephone" style="line-height: initial;" :required="true" default-country-code="CN"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="sava back-fff flex-center">
      <el-button type="primary" @click="register" :loading="loading">Create account</el-button>
    </div>
  </div>
</template>
<script>
import to from "await-to-js";

import { RegisterAccount, DataItemSourceApi } from "@/api/user";
import Regs from "@/utils/Regs.js";
export default {
  data() {
    return {
      yourValue:'',
      form: {
        F_Country: "中国",
        F_Telephone:''
      },
      loading: false,
      DocTypes: [],
      ENRGrades: [],
    };
  },
  async mounted() {
    await Promise.all([this.ENRGradeAsync(), this.DocTypeAsync()]);
  },
  methods: {
    async DocTypeAsync() {
      var [err, response] = await to(DataItemSourceApi({ Code: "DocType" }));
      if (err) return;
      this.DocTypes = response.data.Data || [];
    },
    async ENRGradeAsync() {
      var [err, response] = await to(DataItemSourceApi({ Code: "ENRGrade" }));
      if (err) return;
      this.ENRGrades = response.data.Data || [];
    },
    register() {
console.log(this.form.F_Telephone);

      this.$refs.form.validate((valid) => {
        if (!valid) return false;
        if (!Regs.email.test(this.form.F_Email)) {
          return this.$message.warning({
            message: "Please input correct Emai",
          });
        }
        if (
          //密码不能小于8位数
          this.form.F_Password.length < 8 ||
          //大于16位
          this.form.F_Password.length > 16 ||
          //不能是纯数字，必须有字母或者其他常用符号
          /^\d{1,}$/.test(this.form.F_Password)
        ) {
          return this.$message.warning({
            message: "Set password lenght 8 - 16 characters, min 1 Letter or 1 special character and only contains symbols from the alphabet, numbers and chosen special characters.",
          });
        }
        if (this.form.F_AgainPassword !== this.form.F_Password) {
          return this.$message.warning({
            message: "The two passwords are inconsistent",
          });
        }
        if (!Regs.mobile.test(this.form.F_Telephone.replace(/ /g,''))) {
          return this.$message.warning({
            message: "Please input Mobile Phone",
          });
        }
        this.loading = true;
        let form = { ...this.form };
        delete form.F_AgainPassword;
        RegisterAccount(form)
          .then(() => {
            this.loading = false;
            this.$router.back();
            this.$message.success({ message: "Registration successful" });
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.explain {
  padding: 40px;
  text-align: center;
  margin-top: 20px;
  .h4 {
    font-size: 18px;
    font-weight: bold;
  }
  .text {
    color: #666666;
    font-size: 16px;
    margin-top: 16px;
  }
}
.forms {
  padding: 30px;
  border-top: 1px solid #eee;
  .form {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    ::v-deep .el-form-item__label {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
    }
    ::v-deep .el-select {
      width: 100%;
    }
  }
}
.sava {
  padding: 20px;
  margin-top: 10px;
}
</style>